<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>欢迎登录后台管理系统</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script language="JavaScript" src="js/jquery.js"></script>
    <script src="js/cloud.js" type="text/javascript"></script>

    <script language="javascript">
        $(function(){
            $('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
            $(window).resize(function(){
                $('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
            })
        });
    </script>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <style>
        .block-content {
            display: flex;
            flex-wrap: wrap;
        }

        .goods-list {
            width: 25%;
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .goods-block {
            width: 260px;
            padding: 0 30px;
        }

        .goods-img {
            width: 200px;
            height: 200px;
        }

        .foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .add-card {
            width: 30px;
            height: 30px;
        }

        .mt20 {
            margin-top: 20px;
        }
    </style>

</head>

<body style="background-color:#1c77ac; background-image:url(images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">



<div id="mainBody">
    <div id="cloud1" class="cloud"></div>
    <div id="cloud2" class="cloud"></div>
</div>


<div class="logintop">
    <span>学生登录页面</span>
</div>

<div class="loginbody">
    <span class="systemlogo"></span>
    <div class="loginbox">
        <ul>
            <li><input name="" type="text" class="loginuser" value="admin" id="account"/></li>
            <li><input name="" type="password" class="loginpwd" value="密码" id="password"/></li>
            <li><input name="" type="button" class="loginbtn" value="登录"  onclick="subLogin()"  />
                <!--                <input name="" type="button" href="#" value="注册"  data-toggle="modal" data-target="#regModal" />-->
                <a style="padding-left:  10px" href="#" data-toggle="modal" data-target="#regModal">注册</a>
                <span id="tip" style="color: red"></span>
            </li>

        </ul>
    </div>
</div>

<!-- 注册模态框 -->
<div class="modal fade" id="regModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">学生注册</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <!-- 用户名 -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">登录账号</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="username" required
                                   oninput="checkUsernameUnique()">
                            <span id="usernameTip" class="text-danger small"></span>
                        </div>
                    </div>

                    <!-- 密码部分 -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="regpassword" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">确认密码</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="regrePassword" required>
                            <span id="tips" class="text-danger small"></span>
                        </div>
                    </div>

                    <!-- 个人信息 -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">姓名</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">性别</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="gender" name="gender">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">出生日期</label>
                        <div class="col-sm-9">
                            <input type="date" class="form-control" id="birthDate" name="birthDate" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">身份证号</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="idCard" name="idCard" maxlength="18" required>
                        </div>
                    </div>

                    <!-- 联系信息 -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">手机号</label>
                        <div class="col-sm-9">
                            <input type="tel" class="form-control" name="phone" id="phone" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">电子邮箱</label>
                        <div class="col-sm-9">
                            <input type="email" class="form-control" name="email" id="email" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">紧急联系人</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="emergencyContact" id="emergencyContact" required>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="stuReg()">提交注册</button>
            </div>
        </div>
    </div>
</div>


</body>

<script type="application/javascript">
    // 在提交前添加综合验证
    function validateForm(formData) {
        // 身份证验证
        const idCardRegex = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;
        if (!idCardRegex.test(formData.idCard)) {
            alert('请输入有效的身份证号码');
            return false;
        }

        // 手机号验证
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(formData.phone)) {
            alert('请输入有效的手机号码');
            return false;
        }
        return true;
    }
    // 用户名唯一性实时验证
    let isUsernameValid = false;
    //检查输入的用户名是否唯一
    function checkUsernameUnique() {
        const username = $('#username').val();
        if (!username) {
            $('#usernameTip').text('用户名不能为空');
            isUsernameValid = false;
            return;
        }
        $.ajax({
            url: 'stucheckuser',
            type: 'GET',
            data: { username: username },
            success: function(res) {
                if (res=='N') {
                    $('#usernameTip').text('用户名已被占用');
                    isUsernameValid = false;
                }
                isUsernameValid = true;
            }
        });
    }
    //学生注册
    function stuReg() {
        // 密码验证
        const password = $('#regpassword').val();
        const confirmPassword = $('#regrePassword').val();
        if (password === '' || confirmPassword === '') {
            $('#tips').text('密码不能为空');
            return;
        }
        if (password !== confirmPassword) {
            $('#tips').text('两次输入的密码不一致');
            return;
        }
        // 用户名验证
        if (!isUsernameValid) {
            $('#usernameTip').text('请先验证用户名有效性');
            return;
        }
        // 收集表单数据
        const formData = {
            username: $('#username').val(),
            name: $('#name').val(),
            gender: $('#gender').val(),
            birthDate: $('#birthDate').val(),
            idCard: $('#idCard').val(),
            phone: $('#phone').val(),
            email: $('#email').val(),
            emergencyContact: $('#emergencyContact').val(),
            password: password
        };
        if (!validateForm(formData)) return;
        // AJAX提交
        $.ajax({
            url: 'stureg',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function(res) {
                alert('注册成功！');
                $('#regModal').modal('hide');
                // 清空表单
                // $('regModal').val('');
                $('form')[0].reset();
            },
            error: function(xhr) {
                alert('注册失败: ' + xhr.responseText);
            }
        });
    }

    //学生登录
    function subLogin(){
        //    获取账号和密码
        let account=document.getElementById("account").value
        let password=document.getElementById("password").value
        //判断账号密码是否合法
        if(account==""||password==""){
            // alert("账号或密码 不能为空！")
            document.getElementById("tip").innerHTML="账号或密码 不能为空！"
            return
        }
        document.getElementById("tip").innerHTML=""
        //  验证是否正确
        $.ajax({
            url:"stulog",   //后端请求地址
            type:"POST",    //后端的请求方式
            data:{
                account:account,
                password:password,
            },
            dataType:"text",
            success:function (res){
                // console.log(res)
                // console.log("Storing account:", this.data.account);
                if("Y"==res){   //登录成功
                    localStorage.setItem("account", account); // 将账号存入浏览器本地存储
                    window.location.href = "stuDetail.html"
                }else{
                    document.getElementById("tip").innerHTML="账号或密码错误"
                }

            }
        })
    }


</script>
</html>
